<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../css/ol.css" rel="stylesheet"/>
    <script src="../js/ol.js"></script>
    <style type="text/css">
        #menu
        {
            position:absolute;
            bottom :10px;
            z-index:2000;
        }

    </style>
    <script type="text/javascript">
        window.onload = function () {
            //实例化地图视图对象
            var view = new ol.View({
                center: [12950000, 4860000],
                zoom:7
            });

            //实例化地图对象
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source:new ol.source.OSM()
                    })
                ],
                loadTilesWhileAnimating: true,
                view:view
            });

            //定义不同城市的地理位置坐标
            var shenyang = ol.proj.fromLonLat([123.24, 41.50]);
            var beijing = ol.proj.fromLonLat([116.28, 39.54]);
            var shanghai = ol.proj.fromLonLat([121.29, 31.14]);
            var wuhan = ol.proj.fromLonLat([114.21, 30.37]);
            var guangzhou = ol.proj.fromLonLat([113.15, 23.08]);
            var haikou = ol.proj.fromLonLat([110.20, 20.02]);

            //旋转定位到沈阳
            document.getElementById('rotate').onclick = function () {
                //旋转动画
                var rotate = ol.animation.rotate({
                    //动画持续时间
                    duration: 2000,
                    //地图旋转角度
                    rotation: -4*Math.PI
                });
                //在地图渲染之前执行旋转动画
                map.beforeRender(rotate);
                //设置视图中心点坐标为沈阳
                view.setCenter(shenyang);
            };

            //弹性定位到北京
            document.getElementById('elastic').onclick = function () {
                //平移动画
                var pan = ol.animation.pan({
                    //动画持续时间
                    duration: 2000,
                    //Todo easing:The easing function to use（官方API）参数表示要使用的easing方法
                    //自己定义的easing方法（elastic(t)）明明有一个参数t（Input between 0 and 1），可是此处为什么不用传参
                    //openlayers自带的一些动画效果函数如ol.easing.upAndDown、ol.easing.inAndOut等，感觉不太好，动画有些生硬
                    easing: elastic,
                    //The location to start panning from    从哪个位置开始进行平移
                    source:view.getCenter()
                });
                //在地图渲染之前执行平移动画
                map.beforeRender(pan);
                //设置视图中心点坐标为北京
                view.setCenter(beijing);
            };

            //反弹定位到上海
            document.getElementById('bounce').onclick = function () {
                var pan = ol.animation.pan({
                    duration: 2000,
                    easing: bounce,
                    source: view.getCenter(),
                });
                map.beforeRender(pan);
                view.setCenter(shanghai);
            };

            //自旋定位到武汉
            document.getElementById('spin').onclick = function () {
                var duration = 2000;
                var start = +new Date();//开始时间，+new Date()将当前时间转化为毫秒数
                var pan = ol.animation.pan({
                    duration: duration,
                    source: view.getCenter(),
                    //The start time of the animation   动画开始的时间
                    start:start
                });

                var rotate = ol.animation.rotate({
                    duration: duration,
                    rotation: 2 * Math.PI,
                    start:start
                });

                map.beforeRender(pan, rotate);
                view.setCenter(wuhan);
            };

            //飞行定位到广州
            document.getElementById('fly').onclick = function () {
                var duration = 2000;
                var start = +new Date();

                var pan = ol.animation.pan({
                    duration: duration,
                    source: view.getCenter(),
                    start:start
                });

                var bounce = ol.animation.bounce({
                    duration: duration,
                    //The resolution to start the bounce from   开始反弹动画时的地图分辨率
                    resolution: 4 * view.getResolution(),
                    start:start
                });

                map.beforeRender(pan, bounce);
                view.setCenter(guangzhou);
            };

            //螺旋定位到海口
            document.getElementById('spiral').onclick = function () {
                var duration = 2000;
                var start = +new Date();

                var pan = ol.animation.pan({
                    duration: duration,
                    source: view.getCenter(),
                    start: start
                });

                var bounce = ol.animation.bounce({
                    duration: duration,
                    resolution: 2 * view.getResolution(),
                    start: start
                });

                var rotate = ol.animation.rotate({
                    duration: duration,
                    rotation: -4 * Math.PI,
                    start:start
                });
                map.beforeRender(pan, bounce, rotate);
                view.setCenter(haikou);
            };
        };

        //弹性值
        function elastic(t) {
            return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
        }

        //反弹值
        function bounce(t) {
            var s = 7.5625, p = 2.75, l;
            if (t < (1 / p)) {
                l = s * t * t;
            } else {
                if (t < (2 / p)) {
                    t -= (1.5 / p);
                    l = s * t * t + 0.75;
                } else {
                    if (t < (2.5 / p)) {
                        t -= (2.25 / p);
                        l = s * t * t + 0.9375;
                    } else {
                        t -= (2.625 / p);
                        l = s * t * t + 0.984375;
                    }
                }
            }
            return l;
        }

    </script>
</head>
<body>
<div id="map">
    <div id="menu">
        <button id="rotate">旋转定位到沈阳</button>
        <button id="elastic">弹性定位到北京</button>
        <button id="bounce">反弹定位到上海</button>
        <button id="spin">自旋定位到武汉</button>
        <button id="fly">飞行定位到广州</button>
        <button id="spiral">螺旋定位到海口</button>
    </div>
</div>
</body>
</html>